<template>
    <div id="app">
        <the-header />
        <waves />
        <div class="article-content-container">
            <router-view class="article-content" />
        </div>
        <scroll-top />
        <the-footer />
    </div>
</template>
<script>
import TheHeader from "./components/TheHeader"; // 顶部导航栏
import Waves from "./components/Waves"; // 大波浪
import ScrollTop from "./components/ScrollTop"; // 回到顶部
import TheFooter from "./components/TheFooter"; // 页脚

export default {
    name: "App",
    components: {
        TheHeader,
        ScrollTop,
        TheFooter,
        Waves,
    },
    /* 看板娘初始化
    参数说明
    model 模型的配置
       json 文件资源路径，可以支持网络路径，此处使用的是相对路径
       scale 模型缩放系数
    display 模型布局
       position 位置
       width 宽度
       height 高度
       hOffset 水平偏移量
       vOffset 垂直偏移量
    mobile 移动端配置
       show 显示/隐藏
       scale 缩放比例
    react 模型矩形框样式
       opacity 透明度
       opacityDefault 默认透明度
       opacityOnHover 鼠标悬浮透明度
  */
    created() {
        setTimeout(() => {
            window.L2Dwidget.init({
                pluginRootPath: "../static/live2dw/",
                pluginJsPath: "lib/",
                pluginModelPath: "live2d-widget-model-haru_2/assets/", // 中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
                tagMode: false,
                debug: false,
                model: {
                    jsonPath:
                        "../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json",
                },
                display: { position: "left", width: 200, height: 450 }, // 调整大小,和位置
                mobile: { show: false }, // 要不要盯着你的鼠标看
                log: false,
            });
        }, 1000);
    },
    mounted() {
        // 调用烟花特效
        this.show();
    },
    methods: {
        // 烟花特效
        show() {
            function clickEffect() {
                let balls = [];
                let longPressed = false;
                let longPress;
                let multiplier = 0;
                let width, height;
                let origin;
                let normal;
                let ctx;
                const colours = [
                    "#ffd9d9", // 柔和的粉色，用于温暖和亲切的效果
                    "#fae6dd", // 浅黄色
                    "#c2e1da", // 浅绿色
                    "#87CEEB", // 天空蓝，用于表示天空或水的颜色
                    "#92cad4", // 浅蓝色，用于清新和宁静的效果
                ];
                const canvas = document.createElement("canvas");
                document.body.appendChild(canvas);
                canvas.setAttribute(
                    "style",
                    "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;",
                );
                const pointer = document.createElement("span");
                pointer.classList.add("pointer");
                document.body.appendChild(pointer);

                if (canvas.getContext && window.addEventListener) {
                    ctx = canvas.getContext("2d");
                    updateSize();
                    window.addEventListener("resize", updateSize, false);
                    loop();
                    window.addEventListener(
                        "mousedown",
                        function (e) {
                            pushBalls(
                                randBetween(10, 20),
                                e.clientX,
                                e.clientY,
                            );
                            document.body.classList.add("is-pressed");
                            longPress = setTimeout(function () {
                                document.body.classList.add("is-longpress");
                                longPressed = true;
                            }, 500);
                        },
                        false,
                    );
                    window.addEventListener(
                        "mouseup",
                        function (e) {
                            clearInterval(longPress);
                            if (longPressed === true) {
                                document.body.classList.remove("is-longpress");
                                pushBalls(
                                    randBetween(
                                        50 + Math.ceil(multiplier),
                                        100 + Math.ceil(multiplier),
                                    ),
                                    e.clientX,
                                    e.clientY,
                                );
                                longPressed = false;
                            }
                            document.body.classList.remove("is-pressed");
                        },
                        false,
                    );
                    window.addEventListener(
                        "mousemove",
                        function (e) {
                            let x = e.clientX;
                            let y = e.clientY;
                            pointer.style.top = y + "px";
                            pointer.style.left = x + "px";
                        },
                        false,
                    );
                } else {
                    console.log("canvas or addEventListener is unsupported!");
                }

                function updateSize() {
                    canvas.width = window.innerWidth * 2;
                    canvas.height = window.innerHeight * 2;
                    canvas.style.width = window.innerWidth + "px";
                    canvas.style.height = window.innerHeight + "px";
                    ctx.scale(2, 2);
                    width = canvas.width = window.innerWidth;
                    height = canvas.height = window.innerHeight;
                    origin = {
                        x: width / 2,
                        y: height / 2,
                    };
                    normal = {
                        x: width / 2,
                        y: height / 2,
                    };
                }
                class Ball {
                    constructor(x = origin.x, y = origin.y) {
                        this.x = x;
                        this.y = y;
                        this.angle = Math.PI * 2 * Math.random();
                        if (longPressed === true) {
                            this.multiplier = randBetween(
                                14 + multiplier,
                                15 + multiplier,
                            );
                        } else {
                            this.multiplier = randBetween(6, 12);
                        }
                        this.vx =
                            (this.multiplier + Math.random() * 0.5) *
                            Math.cos(this.angle);
                        this.vy =
                            (this.multiplier + Math.random() * 0.5) *
                            Math.sin(this.angle);
                        this.r = randBetween(8, 12) + 3 * Math.random();
                        this.color =
                            colours[Math.floor(Math.random() * colours.length)];
                    }
                    update() {
                        this.x += this.vx - normal.x;
                        this.y += this.vy - normal.y;
                        normal.x =
                            (-2 / window.innerWidth) * Math.sin(this.angle);
                        normal.y =
                            (-2 / window.innerHeight) * Math.cos(this.angle);
                        this.r -= 0.3;
                        this.vx *= 0.9;
                        this.vy *= 0.9;
                    }
                }

                function pushBalls(count = 1, x = origin.x, y = origin.y) {
                    for (let i = 0; i < count; i++) {
                        balls.push(new Ball(x, y));
                    }
                }

                function randBetween(min, max) {
                    return Math.floor(Math.random() * max) + min;
                }

                function loop() {
                    ctx.fillStyle = "rgba(255, 255, 255, 0)";
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    for (let i = 0; i < balls.length; i++) {
                        let b = balls[i];
                        if (b.r < 0) continue;
                        ctx.fillStyle = b.color;
                        ctx.beginPath();
                        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
                        ctx.fill();
                        b.update();
                    }
                    if (longPressed === true) {
                        multiplier += 0.2;
                    } else if (!longPressed && multiplier >= 0) {
                        multiplier -= 0.4;
                    }
                    removeBall();
                    requestAnimationFrame(loop);
                }

                function removeBall() {
                    for (let i = 0; i < balls.length; i++) {
                        let b = balls[i];
                        if (
                            b.x + b.r < 0 ||
                            b.x - b.r > width ||
                            b.y + b.r < 0 ||
                            b.y - b.r > height ||
                            b.r < 0
                        ) {
                            balls.splice(i, 1);
                        }
                    }
                }
            }
            clickEffect(); // 调用特效函数
        },
    },
};
</script>

<style lang="scss" scoped>
@use "./assets/css/app.scss";
</style>
